<!--考勤班级设置-->
<template>
  <div class="app-page">
    <v-card>
      <v-container fluid grid-list-sm>
        <v-layout row wrap>
          <v-flex xs12>
            <classManage
              @handleClass="handleClass"
              :classList="classList"
              :handleClassIndex="handleClassIndex"
            ></classManage>
          </v-flex>

          <!-- 新建班级 -->
          <v-flex xs12>
            <v-card>
              <v-card-title primary class="title blue--text">新建班级</v-card-title>
              <v-expansion-panel>
                <v-expansion-panel-content>
                  <div slot="header">
                    <v-layout>
                      <v-flex d-flex xs7>教学楼选择</v-flex>
                      <v-flex d-flex xs5>
                        <span class="text-xs-right grey--text">{{radio.option1}}</span>
                      </v-flex>
                    </v-layout>
                  </div>
                  <v-card>
                    <v-layout row wrap>
                      <v-flex d-flex xs1></v-flex>
                      <v-flex d-flex xs11>
                        <v-radio-group v-model="radio.option1" row>
                          <v-radio label="1号楼" color="orange" value="1号楼"></v-radio>
                          <v-radio label="2号楼" color="orange" value="2号楼"></v-radio>
                          <v-radio label="3号楼" color="orange" value="3号楼"></v-radio>
                          <v-radio label="4号楼" color="orange" value="4号楼"></v-radio>
                          <v-radio label="5号楼" color="orange" value="5号楼"></v-radio>
                        </v-radio-group>
                      </v-flex>
                    </v-layout>
                  </v-card>
                </v-expansion-panel-content>
                <v-expansion-panel-content>
                  <div slot="header">
                    <v-layout>
                      <v-flex d-flex xs7>教室选择</v-flex>
                      <v-flex d-flex xs5>
                        <span class="text-xs-right grey--text">{{radio.option2}}</span>
                      </v-flex>
                    </v-layout>
                  </div>
                  <v-card>
                    <v-layout row wrap>
                      <v-flex d-flex xs1></v-flex>
                      <v-flex d-flex xs11>
                        <v-radio-group v-model="radio.option2" row>
                          <v-radio label="3#201-202" color="orange" value="3#201-202"></v-radio>
                          <v-radio label="3#203-204" color="orange" value="3#203-204"></v-radio>
                          <v-radio label="3#205-206" color="orange" value="3#205-206"></v-radio>
                        </v-radio-group>
                      </v-flex>
                    </v-layout>
                  </v-card>
                </v-expansion-panel-content>
                <v-expansion-panel-content>
                  <div slot="header">
                    <v-layout>
                      <v-flex d-flex xs7>班级选择</v-flex>
                      <v-flex d-flex xs5>
                        <span class="text-xs-right grey--text">{{radio.option3}}</span>
                      </v-flex>
                    </v-layout>
                  </div>
                  <v-card>
                    <v-layout row wrap>
                      <v-flex d-flex xs1></v-flex>
                      <v-flex d-flex xs11>
                        <v-radio-group v-model="radio.option3" row>
                          <v-radio label="2008001班" color="orange" value="2008001班"></v-radio>
                          <v-radio label="2008002班" color="orange" value="2008002班"></v-radio>
                          <v-radio label="2008003班" color="orange" value="2008003班"></v-radio>
                          <v-radio label="2008004班" color="orange" value="2008004班"></v-radio>
                          <v-radio label="2008005班" color="orange" value="2008005班"></v-radio>
                          <v-radio label="2008006班" color="orange" value="2008006班"></v-radio>
                        </v-radio-group>
                      </v-flex>
                    </v-layout>
                  </v-card>
                </v-expansion-panel-content>
              </v-expansion-panel>
             
              <!-- <v-card-actions>
                <v-btn color="light-blue">Listen now</v-btn>
              </v-card-actions>-->
            </v-card>
          </v-flex>
           <v-flex xs8 offset-xs2>
               <v-btn block color="info" large>新建班级</v-btn>
           </v-flex>
        </v-layout>
      </v-container>
    </v-card>
  </div>
</template>
<script>
import classManage from "../../components/layouts/classManage.vue";
export default {
  components: {
    classManage
  },
  data() {
    return {
      selectClass: "",
      radio: {
        option1: "",
        option2: "",
        option3: ""
      },
      classList: [
        {
          floor: "7#",
          room: "301-302",
          class: "2018001班"
        },
        {
          floor: "7#",
          room: "303-304",
          class: "2018002班"
        },
        {
          floor: "7#",
          room: "305-306",
          class: "2018003班"
        }
      ],
      handleClassIndex: 0
    };
  },
  created() {
    this.selectClass = this.classList[0].floor + this.classList[0].room;
  },
  methods: {
    handleClass(index) {
      this.handleClassIndex = index;
      this.selectClass =
        this.classList[index].floor + this.classList[index].room;
    }
  }
};
</script>
<style lang='less' scoped>
@import "~@/common/css/appPage.less";
</style>